<template>
  <div class="mime">
    <div class="fiexd">
      <div class="top">
        <!-- <span>扫码</span> -->
        <!-- <span>设置</span> -->
        <van-icon name="scan" />
        <van-icon @click="Exit" name="shrink" />
      </div>
      <div class="header" v-if="isUser">
        <div class="left">
          <p @click="$router.push('/login')">请登录</p>
          <p>◳ 修改昵称</p>
        </div>
        <div class="right">
          <img alt="滚" src="@/assets/head_nv.jpg" />
        </div>
      </div>
      <div class="header" v-else>
        <div class="left">
          <p @click="gname">{{info.name}}</p>
          <p>◳ 修改昵称</p>
        </div>
        <div class="right">
          <img :src="info.src" @click="getInfo" alt />
        </div>
      </div>
      <!-- Grid -->
      <div class="grid">
        <div class="blank">
          <span>12</span>
          <span>沟通值</span>
        </div>
        <div class="blank">
          <span>2</span>
          <span>面试</span>
        </div>
        <div class="blank">
          <span>5</span>
          <span>已投简历</span>
        </div>
        <div class="blank">
          <span>10</span>
          <span>收藏</span>
        </div>
      </div>
    </div>
    <div class="content">
      <!-- 单元格 -->
      <van-cell id="biaoTi" is-link title="求职助手" value="其他/钱包" />
      <!-- 便签 -->
      <div class="van_tabs">
        <div class="van_sro">
          <div :key="item.id" class="van_tab" v-for="item in fuli">
            <div class="left">
              <p>{{item.title}}</p>
              <p>{{item.label}}</p>
            </div>
            <van-icon :name="item.name" />
          </div>
        </div>
      </div>
      <!-- 单元格 -->
      <van-cell-group>
        <van-cell
          :icon="item.icon"
          :key="index"
          :title="item.title"
          is-link
          v-for="(item,index) in list"
        />
      </van-cell-group>
    </div>
    <!-- Dialog弹框 -->
    <van-dialog
      @cancel="quxiao"
      @confirm="queren"
      @open="clear"
      show-cancel-button
      title="修改昵称"
      v-model="show"
    >
      <input placeholder="请输入新昵称" type="text" v-model="newName" />
    </van-dialog>
  </div>
</template>
<script>
export default {
  data: () => ({
    info: {},
    list: [
      {
        title: '附件简历',
        icon: 'records'
      },
      {
        title: '管理求职意向',
        icon: 'add-o'
      },
      {
        title: '个人主页',
        icon: 'wap-home-o'
      },
      {
        title: '牛人问答',
        icon: 'chat-o'
      },
      {
        title: '关注公司',
        icon: 'like-o'
      },
      {
        title: '提升简历爆光',
        icon: 'label-o'
      },
      {
        title: '求职偏好调研',
        icon: 'shrink'
      },
      {
        title: '帮助与反馈',
        icon: 'info-o'
      },
      {
        title: '我的客服',
        icon: ''
      },
      {
        title: '关于',
        icon: 'other-pay'
      },
      {
        title: '关于BOSS',
        icon: 'label-o'
      },
      {
        title: '官方微信',
        icon: 'shrink'
      },
      {
        title: '设置',
        icon: 'info-o'
      },
      {
        title: 'BOSS官网',
        icon: ''
      }
    ],
    fuli: [
      {
        id: 1,
        name: 'star-o',
        title: '简历刷新',
        label: '提升简历活跃'
      },
      {
        id: 2,
        name: 'underway-o',
        title: '竞争力分析',
        label: '洞悉职业竞争'
      },
      {
        id: 3,
        name: 'flower-o',
        title: '职业测试',
        label: '分析职业竞争力'
      },
      {
        id: 4,
        name: 'manager-o',
        title: '垃圾经理',
        label: '狗产品经理'
      }
    ],
    isborder: false,
    active: 1,
    show: false,
    newName: '',
    user: ''
  }),
  activated () {
    this.user = localStorage.getItem('user')
    this.getName()
    this.$store.state.activeinfo = 3
  },
  methods: {
    // 判断用户是否登陆
    async getName () {
      const res = await this.$http.get('/gtename/' + this.user)
      const {
        data: { status, msg, data }
      } = res
      if (status !== 1) return this.$Toast(msg)
      // console.log(data)
      this.info = data[0]
    },
    gname () {
      this.show = !this.show
    },
    quxiao () {},
    async queren () {
      if (this.newName === '') return this.$Toast('昵称不能为空')
      const res = await this.$http.post('/changename', {
        name: this.newName,
        utel: this.user
      })
      // console.log(res)
      const {
        data: { status }
      } = res
      if (status !== 0) return this.$Toast('修改失败')
      this.$Toast('修改成功')
      // 重绘页面
      this.getName()
    },
    clear () {
      this.newName = ''
    },
    // 退出
    Exit () {
      if (!localStorage.getItem('user')) return null
      this.$dialog
        .confirm({
          title: '滚',
          message: '确定要退出吗？'
        })
        .then(() => {
          localStorage.removeItem('user')
          this.user = localStorage.getItem('user')
          // this.isUser()
        })
        .catch(() => {
          // on cancel
        })
    },
    /* 跳转到个人页面 */
    getInfo () {
      this.$router.push('/myhome/myinfo')
    }
  },
  computed: {
    isUser () {
      return !this.user
    }
  }
}
</script>
<style lang="less" scoped>
.mime {
  padding-bottom: 50px;
  .fiexd {
    color: white;
    display: flex;
    flex-direction: column;
    .top {
      background-color: #00ddaa;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 30px;
      font-size: 20px;
      span,
      .van-icon {
        margin-right: 10px;
      }
    }
    .header {
      background-color: #00ddaa;
      box-sizing: border-box;
      width: 100%;
      padding: 0 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .left {
        display: flex;
        flex-direction: column;
        p {
          margin: 0;
          padding: 0;
          font-size: 14px;
          &:first-of-type {
            font-size: 14px;
            font-weight: 500;
          }
        }
      }
      .right {
        display: flex;
        align-items: center;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
    .grid {
      background-color: #00ddaa;
      display: flex;
      justify-content: space-evenly;
      padding: 10px 0;
      .blank {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: center;
        span {
          font-size: 10px;
          &:first-of-type {
            font-size: 16px;
            margin-bottom: 5px;
          }
        }
      }
    }
  }
  .van_tabs {
    width: 100%;
    height: 70px;
    margin-bottom: -5px;
    .van_sro {
      width: 100%;
      height: 100%;
      display: -webkit-box;
      overflow-x: scroll;
    }
    .van_tab {
      margin: 5px 0 5px 15px;
      width: 140px;
      height: 55px;
      border-radius: 10px;
      box-shadow: 0 0 24px 1px #ddd;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        p {
          margin: 0;
          padding: 0;
          font-size: 14px;
          &:last-of-type {
            color: #999;
            font-size: 14px;
          }
        }
      }
      .van-icon {
        display: flex;
        align-items: center;
        color: #00ddaa;
        font-size: 30px;
      }
    }
  }

  #tabs {
    width: 100%;
  }
  #biaoTi {
    .van-cell__title {
      font-size: 16px;
      font-weight: 600;
    }
  }
  .van-dialog {
    background: #00ddaa;
    text-align: center;
    input {
      margin-bottom: 10px;
      width: 80%;
      height: 42px;
      border: none;
      border-radius: 10px;
    }
  }
}
</style>
